<template>
  <div class="hello">
   <canvas id="canvas"></canvas>
   <div class="page">
    <nav>
      <ul>
        <li><img src="../assets/img/logo_03.png"></li>
        <li><a href="">旗下品牌</a>
          <div class="hide-nav">
            <div class="triangle"></div>
            <ul>
              <li id="space">SPACE</li>
              <li id="dance">DANCE</li>
            </ul>
          </div>
        </li>
        <li><a href="">精彩活动</a></li>
        <li><a href="">公司组成</a></li>
        <li><a href="">合作伙伴</a></li>
        <li><a href="">企业文化</a></li>
        <li style="margin-right: 128px;float: right;"><img src="../assets/img/头像2_03.png"></li>
      </ul>
    </nav>
    <div class="gw_zzsc">
      <ul class="fix_flash">
        <li>
          <a style="center top no-repeat" id="banner1"></a>
        </li>
        <li >
          <a style="center top no-repeat" id="banner2"></a>
        </li>
      </ul>


    </div>
    <div class="gw_zzsc_flash_s"></div>
    <div class="top-content">
      <div class="detail-info">
        <div>
          <p class="red-title" style="float: left;"><span class="red-dot"></span><span>开心一笑</span></p>
          <img src="../assets/img/show-detail_03.png" style="width: 100px;float: right;"/>
        </div>
        <div class="content-info-box">
          <div>
            <img src="../assets/img/pic.png"/>
          </div>
          <div style="float: right;width: 500px;">
            <p>
              三岁的儿子从幼儿园回来气呼呼的 <br />
              对我说：“爸爸，老师一点都不好，<br />
              总是凶我，中午还不拍拍我睡觉。”<br />
              <p>我：“老师不可能像妈妈一样照顾那么多人的，你要听话。”</p>
              <p>儿子：“让老师和妈妈换换就好了，</p>
              <p>妈妈每天在幼儿园陪我，老师在家陪爸爸睡觉。”</p>
              <p>想想竟然有点激动呢。</p>
            </p>
            <a href="" class="moreContent">查看更多</a>
          </div>
        </div>
        <div style="text-align: right;cursor: pointer;clear: both;margin-top: 40px;">
          <img src="../assets/img/chageTopContent_03.png" class="change-content" style="width: 60px;"/>
        </div>
      </div>
      <!--信息公告-->
      <div class="detail-info" style="display: none;">
        <div>
          <p class="red-title" style="float: left;"><span class="red-dot"></span><span>信息公告</span></p>
          <img src="../assets/img/show-detail_03.png" style="width: 100px;float: right;"/>
        </div>
        <div class="content-info-box">
          <div>
            <img src="../assets/img/pic.png"/>
          </div>
          <div style="float: right;width: 500px;">
            <p>
              <a href="">郑州SPACE店新店开业</a>
              <a href="">郑州SPACE店新店开业</a>
              <a href="">郑州SPACE店新店开业</a>
              <a href="">郑州SPACE店新店开业</a>
              <a href="">郑州SPACE店新店开业</a>
              <a href="">郑州SPACE店新店开业</a>
              <a href="">郑州SPACE店新店开业</a>
            </p>
            <a href="" class="moreContent">查看更多</a>
          </div>
        </div>
        <div style="text-align: right;cursor: pointer;clear: both;margin-top: 40px;">
          <img src="../assets/img/chageTopContent_03.png" class="change-content" style="width: 60px;"/>
        </div>
      </div>

      <img src="../assets/img/DC_09.png" class="title-icon" style="display: none;" id="circle1" />
      <img src="../assets/img/meiyuan.png" class="title-icon" style="display: none;" id="circle2" />
    </div>
  </div>
  <div class="page" style="margin-top: 60px;padding-top: 43px;">
    <div class="detail-info2">
      <p class="red-title" style="float: left;"><span class="red-dot"></span><span>主题派对</span></p>
      <div class="content-info-box" style="padding-left: 60px">
        <div class="detail1">
          <p><span class="red-dot2 location1"></span>你并不是一名星际流浪汉</p>
          <p>你是我们最重要的太空漫游者</p>
          <p>用无法复制的力量</p>
          <p>创造独一无二的疯狂未来</p>
          <p>期待你的假日。。。</p>
        </div>
        <div style="float: right;width: 502px;height: 773px;">
         <img src="../assets/img/astronaut.png"/>
       </div>
     </div>
     <div class="content-info-box" style="margin-top: 210px;padding-right: 60px;">
      <div style="width: 502px;height: 555px">
        <img src="../assets/img/spacetraveler.png"/>
      </div>
      <div style="float: right;" class="detail1">
        <p>在SPACE号最强太空堡垒中<span class="red-dot2 location2"></span></p>
        <p>船长MARS将带领你我共同</p>
        <p>开启新宇宙的大门</p>
      </div>
    </div>
    <div class="location3">
      <img src="../assets/img/箭头_03.png">
    </div>
  </div>
</div>
<div class="page" style="height: 1000px;padding-top: 110px">
  <div class="detail-info3">
  <div class="m" style="width: 100%;height: 100%">

      <video poster="../../static/img/pic3.png" controls  preload="none" id="video1">
        <source src="http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v" type="video/mp4">
          <!-- <source src="/path/to/video.webm" type="video/webm">-->
          <!-- Captions are optional -->
        </video>



      </div>
    </div>
  </div>
</div>
</template>

<script>
 
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .page{
    margin: 30px;
    background-color: white;
    height: 1970px;
    background: url(../assets/img/background.png) no-repeat;
    z-index: 100;
    background-size: 100% 100%
  }
  #banner1{
   background: url(../assets/img/banner1_03.png) center top no-repeat;
 }
 #banner2{
   background: url(../assets/img/banner2_03.png) center top no-repeat;
 }
 #video1{
       width: 100%;
            height: 100%;
            background:transparent url('../assets/img/pic2.png') 50% 50% no-repeat;
            -webkit-background-size:cover;
            -moz-background-size:cover;
            -o-background-size:cover;
            background-size:cover;
    }
</style>
